var APIURL = 'http://175.27.157.61:5000/'; //远程请求地址

var LEVEL = 0; //默认市一级 0北京市 1行政区 2街道
var CITYCODE = ''; //北京代码100
var AREACODE = ''; //行政区代码
var STREETCODE = ''; //街道代码
var SELECTSTREETDATA = ''; //所选行政区下属街道
var DATA = []; //全部数据
var SHOWDATA = []; //需要展示的数据

//
function _showTime() {
	var now = new Date();
	var year = now.getFullYear();
	var month = now.getMonth();
	var date = now.getDate();
	var day = now.getDay();
	var hour = now.getHours();
	var minu = now.getMinutes();
	var sec = now.getSeconds();
	var week;
	month = month + 1;
	if (month < 10) month = "0" + month;
	if (date < 10) date = "0" + date;
	if (hour < 10) hour = "0" + hour;
	if (minu < 10) minu = "0" + minu;
	if (sec < 10) sec = "0" + sec;
	var arr_week = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
	week = arr_week[day];
	var time = '<span>' + year + '-' + month + '-' + date + '</span> <span>' + hour + ':' + minu + ':' + sec + '</span> <span>' + week + '</span>';
	$('.csps-date').html('<i class="iconfont icon-ClockCircle"></i> ' + time);
	setTimeout('_showTime()', 1000);
}
//
$(document).ready(function() {
	var _function = {
		_init: function(callback) {
			$.get(APIURL + 'getCAFareaALL', function(r) {
				$('.loading').fadeOut();
				let res = eval('(' + r + ')');
				try {
					DATA = res;
					if (typeof callback === 'function') {
						callback();
					}
				} catch (e) {}
			}).fail(function() {
				alert("getCAFareaALL fail connected！");
			});
		},
		_show: function() {

			if (LEVEL == 0) {
				$('.area-name').text('北京市');
				SHOWDATA = DATA.city[0];
			} else if (LEVEL == 1) {
				$('.area-name').text(AREA[AREACODE]);
				for (let i in DATA.zone) {
					if (DATA.zone[i].STID == AREACODE) SHOWDATA = DATA.zone[i];
				}
			} else if (LEVEL == 2) {
				$('.area-name').text(SELECTSTREETDATA[STREETCODE]);
				for (let i in DATA.street) {
					if (DATA.street[i].STID == STREETCODE) SHOWDATA = DATA.street[i];
				}
			}

			//各类土地利用占地面积
			this._showCityTable();

			//各类土地利用占地比例
			this._showPie();
		},

		_returnPer: function(val, max) {
			return (val / max);
		},

		//各类土地利用占地面积
		_showCityTable: function() {

			let _d = [{
				name: '绿地与广场用地',
				val: SHOWDATA.LAG_Area,
				per: this._returnPer(SHOWDATA.LAG_Area, SHOWDATA.ALL - SHOWDATA.LAN_Area)
			}, {
				name: '公用设施用地',
				val: SHOWDATA.LAU_Area,
				per: this._returnPer(SHOWDATA.LAU_Area, SHOWDATA.ALL - SHOWDATA.LAN_Area)
			}, {
				name: '公共管理与公共<br>服务设施用地',
				val: SHOWDATA.LAA_Area,
				per: this._returnPer(SHOWDATA.LAA_Area, SHOWDATA.ALL - SHOWDATA.LAN_Area)
			}, {
				name: '工业用地',
				val: SHOWDATA.LAM_Area,
				per: this._returnPer(SHOWDATA.LAM_Area, SHOWDATA.ALL - SHOWDATA.LAN_Area)
			}, {
				name: '商业服务业<br>设施用地',
				val: SHOWDATA.LAB_Area,
				per: this._returnPer(SHOWDATA.LAB_Area, SHOWDATA.ALL - SHOWDATA.LAN_Area)
			}, {
				name: '居住用地',
				val: SHOWDATA.LAR_Area,
				per: this._returnPer(SHOWDATA.LAR_Area, SHOWDATA.ALL - SHOWDATA.LAN_Area)
			}, {
				name: '道路与交通设施用地',
				val: SHOWDATA.LAS_Area,
				per: this._returnPer(SHOWDATA.LAS_Area, SHOWDATA.ALL - SHOWDATA.LAN_Area)
			}];

			$('#CAFarea').empty();
			$('#_CAFareaTpl').tmpl({
				data: _d
			}).appendTo('#CAFarea');

		},

		//各类土地利用占地比例
		_showPie: function() {
			var pieCharts = echarts.init(document.getElementById('pieCharts'));
			pieCharts.setOption({
				tooltip: {
					trigger: 'item',
					formatter: function(e) {
						if (e.componentType == 'series') {
							return e.name + '<br><br><b style="font-size:20px">占比' + Number(e.percent).toFixed(0) + '%</b>';
						} else {
							return '';
						}
					},
					backgroundColor: 'rgba(0,25,70,0.9)',
					borderColor: 'rgba(35,167,250,0.9)',
					borderWidth: 2,
					padding: 20,
					textStyle: {
						color: '#fff'
					}
				},
				series: [{
					type: 'pie',
					radius: ['30%', '50%'],
					itemStyle: {
						borderRadius: 5
					},
					label: {
						alignTo: 'edge',
						formatter: [
							'{name|{b}}',
							'{icon|}'
						].join('\n'),
						edgeDistance: 10,
						lineHeight: 14,
						color: '#d6edff',
						rich: {
							name: {
								padding: [20, 20, 20, 20],
								color: '#d6edff'
							}
						}
					},
					labelLine: {
						lineStyle: {
							color: '#475363'
						}
					},
					labelLayout: function(params) {
						var isLeft = params.labelRect.x < pieCharts.getWidth() / 2;
						var points = params.labelLinePoints;
						points[2][0] = isLeft ?
							params.labelRect.x + 20 :
							params.labelRect.x + params.labelRect.width - 40;
						points[1][1] = params.labelRect.y + params.labelRect.height - 10;
						points[2][1] = params.labelRect.y + params.labelRect.height - 10;
						return {
							labelLinePoints: points
						};
					},
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					},
					data: [{
						value: SHOWDATA.LAG_Area,
						name: '绿地与\n广场用地',
						itemStyle: {
							color: '#32cb50'
						},
						label: {
							rich: {
								icon: {
									width: 20,
									height: 20,
									backgroundColor: {
										image: 'res/images/left-t-ico-1.svg'
									}
								}
							}
						}
					}, {
						value: SHOWDATA.LAA_Area,
						name: '公共管理\n与公共服务\n设施用地',
						itemStyle: {
							color: '#4295ff'
						},
						label: {
							rich: {
								icon: {
									width: 20,
									height: 20,
									backgroundColor: {
										image: 'res/images/left-t-ico-3.svg'
									}
								}
							}
						}
					}, {
						value: SHOWDATA.LAB_Area,
						name: '商业服务业\n设施用地',
						itemStyle: {
							color: '#c5412e'
						},
						label: {
							rich: {
								icon: {
									width: 20,
									height: 20,
									backgroundColor: {
										image: 'res/images/left-t-ico-5.svg'
									}
								}
							}
						}
					}, {
						value: SHOWDATA.LAM_Area,
						name: '工业用地',
						itemStyle: {
							color: '#e99372'
						},
						label: {
							rich: {
								icon: {
									width: 20,
									height: 20,
									backgroundColor: {
										image: 'res/images/left-t-ico-4.svg'
									}
								}
							}
						}
					}, {
						value: SHOWDATA.LAU_Area,
						name: '公用设施用地',
						itemStyle: {
							color: '#d7663a'
						},
						label: {
							rich: {
								icon: {
									width: 20,
									height: 20,
									backgroundColor: {
										image: 'res/images/left-t-ico-2.svg'
									}
								}
							}
						}
					}, {
						value: SHOWDATA.LAR_Area,
						name: '居住用地',
						itemStyle: {
							color: '#c5b92e'
						},
						label: {
							rich: {
								icon: {
									width: 20,
									height: 20,
									backgroundColor: {
										image: 'res/images/left-t-ico-6.svg'
									}
								}
							}
						}
					}, {
						value: SHOWDATA.LAS_Area,
						name: '道路与交通\n设施用地',
						itemStyle: {
							color: '#c4c4c4'
						},
						label: {
							rich: {
								icon: {
									width: 20,
									height: 20,
									backgroundColor: {
										image: 'res/images/left-t-ico-7.svg'
									}
								}
							}
						}
					}]
				}]
			});

			//
			window.addEventListener('resize', () => {
				pieCharts.resize();
			});
		}

	};

	_function._init(function() {

		_showTime();

		//选择城市
		$('body').on('change', 'select[name=city_select]', function() {
			let val = $(this).val();
			if (val == '' || val == 100) {
				let _areaOption = '<option value="">行政区</option>';
				for (let i in AREA) {
					_areaOption += '<option value="' + i + '">' + AREA[i] + '</option>';
				}
				$('select[name=area_select]').empty().append(_areaOption);
				$('select[name=street_select]').empty().append('<option value="">街道</option>');
				LEVEL = 0;
				CITYCODE = 100;
				_function._show();
			}
		});
		$('select[name=city_select]').find("option[value='100']").attr("selected", true).change();

		//选择行政区
		$('body').on('change', 'select[name=area_select]', function() {
			let val = $(this).val();
			//组合出街道数据
			let _selectStreetData = [],
				_streetOption = '<option value="">街道</option>';
			for (let i in STREETDATA.features) {
				if (STREETDATA.features[i].properties.COID == val) {
					_selectStreetData[STREETDATA.features[i].properties.STID] = STREETDATA.features[i].properties.SNAME;
					_streetOption += '<option value="' + STREETDATA.features[i].properties.STID + '">' + STREETDATA.features[i].properties.SNAME + '</option>';
				}
			}
			SELECTSTREETDATA = _selectStreetData;
			$('select[name=street_select]').empty().append(_streetOption);
			//加载对应行政区的数据
			LEVEL = val == '' ? 0 : 1;
			AREACODE = val;
			_function._show();
		});

		//选择街道
		$('body').on('change', 'select[name=street_select]', function() {
			let val = $(this).val();
			LEVEL = val == '' ? 1 : 2;
			STREETCODE = val;
			_function._show();
		});

		//行政区级 街道级  切换按钮
		$('body').on('click', '.csps-center .csps-type a', function() {
			$(this).addClass('active').siblings().removeClass('active');
		});

		//点击底部按钮
		$('body').on('click', '.csps-center .csps-center-btns a', function() {
			$(this).addClass('active').siblings().removeClass('active');
		});

		//点击全屏按钮
		$('body').on('click', '.csps-center .csps-zoom', function() {
			if ($('.csps-center').hasClass('full')) {
				$(this).removeClass('min');
				$('.csps-center').removeClass('full').css({
					'top': '140px',
					'left': '440px',
					'right': '20px',
					'bottom': '20px',
					'z-index': 10
				});
			} else {
				$(this).addClass('min');
				$('.csps-center').addClass('full').css({
					'top': 0,
					'left': 0,
					'right': 0,
					'bottom': 0,
					'z-index': 10000
				});
			}
		});

		//说明
		$('body').on('mouseover', '.csps-header .csps-sub-logo i', function() {
			$(this).find('.tips').stop(true, false).fadeIn();
		}).on('mouseout', '.csps-header .csps-sub-logo i', function() {
			$(this).find('.tips').stop(true, false).fadeOut();
		});

	});

});